<template>
  <div class="common-editor">
    <div class="row-btn">
      <span v-for="item in btns" :key="item.span" @click="clickBtn(item.text)">
        {{ item.span }}
      </span>
    </div>
    <monaco-editor   ref="editor" v-model="sqlText" width="1000" height="300" :options="options"></monaco-editor>

  </div>
</template>

<script>
import MonacoEditor from '@framework-core/utils/monaco-editor'
  export default {
    name: 'CommonEditor',
    components: { MonacoEditor },
    props: ['value'],
    data() {
      const defaultForm={
        sqlText: '',
        tag: null
      };
      return {

        options: {
          language:'sql',
          fullScreen: true,
          minimap: {
            enabled: false,
          },
        },
        defaultForm,
        form: {
          ...defaultForm
        },
        sqlText: '',
        btns: [
          {
            span: 'foreach',
            text: '<foreach open="(" close=")" collection="" separator="," item="item" index="index">#{item}</foreach>'
          },
          {
            span: 'if',
            text: '<if test="" ></if>'
          },
          {
            span: 'where',
            text: '<where></where>'
          },
          {
            span: 'trim',
            text: '<trim prefix="" suffix="" suffixesToOverride="" prefixesToOverride=""></trim>'
          },
          {
            span: '参数',
            text: '参数=#{参数}'
          }
        ]
      };
    },


    mounted() {
      // 初始化
     // this.initialize();

    },

    methods: {
      // 初始化
      initialize(val) {
            this.form.params= val.params!=''? eval('('+val.params+')'):[];
            this.form.outParame=val.outParame;
            this.outParame=val.outParame;
            this.form.tag=val.tag;
            this.form.sqlText=val.sqlText;
            this.sqlText=val.sqlText;
            console.log(this.form)

            setTimeout(() => {
                    if(this.$refs.editor){
                      this.$refs.editor._setValue( this.sqlText)
                      this.$refs.editor.setMaxEditor(1000,300)


                    }
            }, 500)
      },

      isVali () {
        if(!this.form.sqlText){
          this.form.sqlText = ''
        }
        this.sqlText=this.form.sqlText;
        return !! this.sqlText;

      },
      clickBtn(text) {

        this.sqlText = (this.sqlText??"") + '\n' + text;

        this.$refs.editor._setValue( this.sqlText)
        console.log("sqlText:"+this.sqlText)
      }
    }
  };
</script>
<style lang="scss" scoped>
  .common-editor {
    width: 100%;
    height: 100%;
    .CodeMirror {
      // color: #ccc;
      direction: ltr;
      line-height: 20px;
      width: 100%;
      height: 100%;
      // background-color: #000;
    }

    .CodeMirror-hints {
      z-index: 9999 !important;
    }
    .custom-class .CodeMirror {
      width: 100%;
    }
  }
  .CodeMirror-hints {
    z-index: 1000;
  }
  .tabs {
    background-color: #eee;
    color: #fff;
    height: 30px;
    ul {
      display: flex;
      li {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 90px;
        position: relative;
        &.tabs-item {
          cursor: pointer;
          color: #000;
        }
        &.active {
          background-color: #000;
          height: 30px;
          border: 5px solid #eee;
          border-top: 0;
          border-left-width: 0;
          box-sizing: border-box;
          color: #fff;
          border-top: 0;
        }
        .remove-tab {
          position: absolute;
          top: 2px;
          right: 2px;
          line-height: 1;
          cursor: pointer;
          opacity: 0.7;
        }
        &.add-tab {
          justify-content: start;
          i {
            font-size: 20px;
            color: #000;
            cursor: pointer;
          }
        }
      }
    }
  }
  .row-btn {
    display: flex;
    padding-bottom: 10px;
    justify-content: flex-end;
    span {
      margin-right: 5px;
      padding: 0 10px;
      height: 20px;
      line-height: 20px;
      color: #fff;
      border-radius: 5px;
      background-color: #33cc99;
      text-align: center;
      cursor: pointer;
    }
  }
</style>
